



<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Rubra</title>
        
        <link rel="stylesheet" href="css/reset.css" type="text/css"  />
		<link rel="stylesheet" href="css/grid.css" type="text/css"  />
		<link rel="stylesheet" href="css/general.css" type="text/css"  />
		<link rel="stylesheet" href="css/menu.css" type="text/css"  />
		<link rel="stylesheet" href="css/forms.css" type="text/css" />
        <link rel="stylesheet" href="css/css3.css" type="text/css"  />
		<link rel="stylesheet" href="css/jquery-ui-1.8.17.custom.css" type="text/css"  />
		<link rel="stylesheet" href="css/style.css" type="text/css"  />
        
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/modernizr-1.7.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
        
        <script type="text/javascript" src="js/jquery.serializeObject.js"></script>
        <script type="text/javascript" src="js/jquery.json-2.3.min.js"></script>
        <script type="text/javascript" src="js/jquery.datalink2.js"></script>
        <script type="text/javascript" src="js/jquery.tmpl2.js"></script>
        <!--<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>-->
        <script type="text/javascript" src="js/crocus/util/mensaje.js"></script>
        <script type="text/javascript" src="js/crocus/util/conversor.js"></script>
    </head>
    <body>
        <div class="head">
            

<div class="row logo">
    <div class="col col_7">Rubra</div>
</div>
<div class="row">    
    <!--     
    <ul class="menu">
        <li><a href="app/page/evento" class="active"><span>Administrador de eventos</span></a></li>
        <li><a href="#"><span>Administrador de usuarios</span></a></li>
        <li><a href="#"><span>Eventos archivados</span></a></li>
    </ul>
     -->
     <ul class="menu">
     
        <li>            
            <a href="app/page/evento"><span>Administrador de eventos</span></a>
        </li>
     
        <li>            
            <a href="app/page/persona"><span>Administrador de personas</span></a>
        </li>
     
        <li>            
            <a href=""><span>Administrador de usuarios</span></a>
        </li>
     
        <li>            
            <a href=""><span>Eventos archivados</span></a>
        </li>
     
     </ul>   
     
     <div class="breadcrumb">
         <span class="left"></span>
           <ul>
           
                <li><a href="app/page/evento"  >Eventos</a></li>
            
                <li><a href="app/page/evento/edicion/id/1"  >unEvento  1</a></li>
            
                <li><a href="app/page/evento/1/pasajero"  >Pasajeros</a></li>
            
                <li><a href="app/page/evento/1/pasajero/alta" id="breadcrumb_actual" class="active" >Nueva persona</a></li>
            
           </ul>
         <span class="right"></span>
     </div>                  
</div>

        </div>
        <div class="content">
             

<script type="text/javascript" src="js/jquery-validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/jquery-validate/localization/messages_es.js"></script>	
<script>

	var pasajeroId = null;
	var eventoId = 1;
        	
	var pasajero = {
		id : "",
        evento: {
        	id: "",
        	nombre: "",
        	cantidadAsistentes: ""
        },				
		persona : {
		    id : "",
            apellido : "",
            nombre : "",
            tipoDoc : "",
            numeroDoc : ""
		},
        acompanianteDe : {
        	id : "",
        	persona: {
                id : "",
                apellido : "",
                nombre : "",
                tipoDoc : "",
                numeroDoc : ""      		
        	}
        },
        acompaniantes : [],
        observacion : "Es es una observacion"
	}
	//pasajero = {};
	
	
    $(document).ready(function(){
        $("#mensaje").parent().hide();
        $(".button").button();
        $(".datepicker").live('click', function() {
            $(this).datepicker({
                showOn:'focus',
                dateFormat : 'dd-mm-yy'
                }).focus();
            });
        
        var $form_pasajero = $("#form_pasajero");
        $form_pasajero.submit(function(){return false;});
        $form_pasajero.validate();
        
        $("#volver").click(function(){
            window.location.href = 'app/page/evento/' + eventoId + "/pasajero";
        });
        
        $("#acompanianteDe").hide();
        $("input[name=pasajero\\.acompaniante]").bind("click", function(){
            var valor = $($(this), ":checked").val();
            if (valor == "true") {
                $("#acompanianteDe").show();
            } else {
                $("#acompanianteDe").hide();
            }
        });        
        
        /*
        $form_pasajero.hide();
        definirFormulario();
        
        var cache = {},
        lastXhr;
        $( "#pasajero\\.persona\\.descripcion" ).autocomplete({
            minLength: 2,
            source: function( request, response ) {
                var term = request.term;
                if ( term in cache ) {
                    response( cache[ term ] );
                    return;
                }
                lastXhr = $.getJSON( 'app/persona/busqueda', request, 
                	function( data, status, xhr ) {
	                    cache[ term ] = data;
	                    if ( xhr === lastXhr ) {
	                        response( data );
	                     }
                    });
            },
	        select: function( event, ui ) {
	        	var descripcion = ui.item.apellido + " " + ui.item.nombre + ", " + ui.item.tipoDoc + " " + ui.item.numeroDoc;
	            $("#persona_id").val(ui.item.id);
	        	$(this).val( descripcion );
	            return false;
	        },
	        change: function(){
	            var value = $.trim($(this).val());
	            if (value.length == 0){
	                //No selecciono ninguno
	                $("#persona_id").val("");
	            } 
	        }
        }).data( "autocomplete" )._renderItem = function ( ul, item ) {
        	var descripcion = item.apellido + " " + item.nombre + ", " + item.tipoDoc + " " + item.numeroDoc;
            return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + descripcion + "</a>" )
            .appendTo( ul );
        };*/
        
   
		
		$("#pasajero\\.observacion").on("change",function(){
			//$("#pasajero\\.observacion").val($(this).val());
			$.setField( pasajero, "observacion", $(this).val() );
        });
        
        $.dataLink("#form_pasajero", pasajero);
        $.dataLink( pasajero, "#form_pasajero").pushValues();
        $("#crear_actualizar").bind("click", function(){
            if (!$("#form_pasajero").valid()){
                console.log("no es valido");
                return false;
            }  
            console.log("Es valido");
            return false;   
        });
    });

	/*function definirFormulario() {
		var $crear_actualizar = $("#crear_actualizar"); 
		      
		$.dataLink("#form_pasajero", pasajero);
		if (pasajeroId == null) {
		    $("#form_pasajero").show();
		    $crear_actualizar.bind("click", crearPasajero);
		    $.dataLink( pasajero, "#form_pasajero").pushValues();
		} else {
		    jQuery.ajax({
		        type : 'GET',
		        url : 'app/pasajero/id/' + persona_id ,
		        contentType : 'application/json',
		        dataType : 'json',
		        success : servicioObtenerPersonaSuccessCallBack,
		        error : servicioObtenerPersonaErrorCallBack
		
		    });
		}
		
		$("#pasajero\\.observacion").bind("change",function(){
			$("#observacion").val($(this).val());	
		});
		
		$("#observacion").bind("change",function(){
			$("#pasajero\\.observacion").val($(this).val());
        });
		
	}*/
	
	function crearPasajero(){
        if (!$("#form_pasajero").valid()){
            return false;
        }  
        jQuery.ajax({
            type : 'POST',
            url : 'app/pasajero',
            contentType : 'application/json',
            dataType : 'json',
            data : $.toJSON(pasajero),
            success : servicioIngresarPasajeroSuccessCallBack,
            error : servicioIngresarPasajeroErrorCallBack

        });
    }
    function actualizarPasajero(){
        if (!$("#form_pasajero").valid()){
            return false;
        }  
        jQuery.ajax({
            type : 'PUT',
            url : 'app/pasajero',
            contentType : 'application/json',
            dataType : 'json',
            data : $.toJSON(persona),
            success : servicioActualizarPasajeroSuccessCallBack,
            error : servicioActualizarPasajeroErrorCallBack

        });
    }
	
    function servicioObtenerPersonaSuccessCallBack(data) {
        jsonObjectMerge(data, pasajero);
        
        var $crear_actualizar = $("#crear_actualizar"); 
        $crear_actualizar.bind("click", actualizarPersona);
        $("#crear_actualizar span").text("Actualizar pasajero");
        $("#breadcrumb_actual").text("Actualizando "+pasajero.persona.apellido + ", " + pasajero.persona.nombre);
        $("#form_persona").show();
        $.dataLink( persona, "#form_pasajero").pushValues();
    } 
    function servicioIngresarPasajeroSuccessCallBack(data) {
        jsonObjectMerge(data, pasajero);
        servicioSuccessMensaje("#mensaje","El pasajero se ingres&oacute; correctamente en el sistema");
        $("#crear_actualizar").unbind("click").bind("click", actualizarPasajero);
        $("#crear_actualizar span").text("Actualizar persona");
        $("#breadcrumb_actual").text("Actualizando "+pasajero.persona.apellido + ", " + pasajero.persona.nombre);
    } 
    function servicioActualizarPasajeroSuccessCallBack(data) {
        jsonObjectMerge(data, pasajero);
        servicioSuccessMensaje("#mensaje","La persona se actualiz&oacute; correctamente");
    }
    function servicioObtenerPasajeroErrorCallBack(data) {
        servicioErrorMensaje("#mensaje", "Ocurri&oacute; un error al obtener informaci&oacute;n del pasajero", data);
    }
    function servicioActualizarPasajeroErrorCallBack(data) {
        servicioErrorMensaje("#mensaje", "Ocurri&oacute; un error al actualizar la informaci&oacute;n del pasajero", data);
    }
    function servicioIngresarPasajeroErrorCallBack(data) {
        servicioErrorMensaje("#mensaje", "Ocurri&oacute; un error al ingresar la la informaci&oacute;n del pasajero", data);
    }
</script>
    <div class="row">
        <h2>Personas</h2>
        <div class="contenedor_mensaje col col_16">
            <div  id="mensaje"></div>
        </div>
    </div>
    <div class="row steps content_form">
        <div class="col col_3">&nbsp;</div>
        <div class="col col_10">
            <form id="form_pasajero" name="form_pasajero">
                <input type="text" name="id" id="persona_id" data-jq-linkto="id" data-jq-linkfrom="id"/>
                <fieldset class="step s_column" id="seccion_pasajero">
                <legend>Pasajero</legend>
                    <div>
                        <label for="pasajero.persona.descripcion">Pasajero</label> 
                        <input id="pasajero.persona.descripcion" name="pasajero.persona.descripcion" type="text" class="required"/>
                        <input type="hidden" name="pasajero.persona.id" id="persona_id" data-jq-linkto="persona.id" data-jq-linkfrom="persona.id"/>
                    </div>
                    <div class="radio_column">
                        <span class="label">Acompa&ntilde;ante</span>
                        <div>
                            
                            <input id="pasajero.conAcompaniante" name="pasajero.acompaniante" type="radio" value="true" />
                            <label for="pasajero.conAcompaniante">Si</label> 
                            
                            <input id="pasajero.sinAcompaniante" name="pasajero.acompaniante" type="radio"  value="false"/>
                            <label for="pasajero.sinAcompaniante">No</label>
                        </div>
                    </div>
                    <div id="acompanianteDe">
                        <label for="pasajero.acompanianteDe">Acompa&ntilde;ante de</label> 
                        <input id="pasajero.acompanianteDe.id" name="pasajero.acompanianteDe.id" type="hidden" data-jq-linkto="acompanianteDe.id" data-jq-linkfrom="acompanianteDe.id" />
                        <input id="pasajero.acompanianteDe" name="pasajero.acompanianteDe" type="text" class="required"/>
                    </div>
                    <div>
                        <label for=""pasajero.observacion">Observaciones</label> 
                        <textarea id="pasajero.observacion" name="pasajero.observacion" data-jq-linkto="observacion" data-jq-linkfrom="observacion"></textarea>
                    </div>
                </fieldset>
		        <button class="button" id="crear_actualizar">Crear </button>
                <button class="button" id="volver" class="cancel">Volver al listado</button>
		    </form>
		    
        </div>
        <div class="col col_3">&nbsp;</div>
    </div>        

        </div>
        <div class="row footer">
        
        </div>
    </body>
</html>

